<!DOCTYPE html>
<!-- Template Name: Rapido - Responsive Admin Template build with Twitter Bootstrap 3.x Version: 1.0 Author: ClipTheme -->
<!--[if IE 8]><html class="ie8 no-js" lang="en"><![endif]-->
<!--[if IE 9]><html class="ie9 no-js" lang="en"><![endif]-->
<!--[if !IE]><!-->
<html lang="en" class="no-js">
	<!--<![endif]-->
	<!-- start: HEAD -->
	<head>
		<title>登陆</title>
		<!-- start: META -->
		<meta charset="utf-8" />
		<!--[if IE]><meta http-equiv='X-UA-Compatible' content="IE=edge,IE=9,IE=8,chrome=1" /><![endif]-->
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta content="" name="description" />
		<meta content="" name="author" />
		<!-- end: META -->
		<!-- start: MAIN CSS -->
		<link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.min.css">
		<link rel="stylesheet" href="assets/plugins/font-awesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="assets/plugins/animate.css/animate.min.css">
		<link rel="stylesheet" href="assets/plugins/iCheck/skins/all.css">
		<link rel="stylesheet" href="assets/css/styles.css">
		<link rel="stylesheet" href="assets/css/styles-responsive.css">
		<link rel="stylesheet" href="assets/plugins/iCheck/skins/all.css">

		<!-- start: The fav icon -->
		<link rel="shortcut icon" href="assets/images/favicon.ico" type="image/x-icon" />
		<!-- end: The fav icon -->
		<!--[if IE 7]>
		<link rel="stylesheet" href="assets/plugins/font-awesome/css/font-awesome-ie7.min.css">
		<![endif]-->
		<!-- end: MAIN CSS -->
		<!-- start: CSS REQUIRED FOR THIS PAGE ONLY -->
		<!-- end: CSS REQUIRED FOR THIS PAGE ONLY -->
	</head>
	<!-- end: HEAD -->
	<!-- start: BODY -->
	<body class="login">
		<div class="row">
			<div class="main-login col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-2 col-md-4 col-md-offset-4">
				<!-- <div class="logo">
					<img src="assets/images/logo.png">
				</div> -->
				<!-- start: LOGIN BOX -->
				<div class="box-login">
					<h3>登录到您的帐户</h3>
					<p>
						请输入您的用户名和密码登录。
					</p>
					<form class="form-login">
						<div class="errorHandler alert alert-danger no-display">
							<i class="fa fa-remove-sign"></i> 用户名或密码有误，请检查！
						</div>
						<fieldset>
							<div class="form-group">
								<span class="input-icon">
									<input type="text" class="form-control" id="username" name="username" placeholder="账号">
									<i class="fa fa-user"></i> </span>
							</div>
							<div class="form-group form-actions">
								<span class="input-icon">
									<input type="password" class="form-control password" id="pwd" name="password" placeholder="密码">
									<i class="fa fa-lock"></i>
									<a class="forgot" href="#">
										忘记了密码？
									</a> </span>
							</div>
							<div class="form-actions">
								<label for="remember" class="checkbox-inline">
									<input type="checkbox" class="grey remember" id="remember" name="remember">
									保持登录状态
								</label>
								<a type="submit" id="submit-btn" class="btn btn-green pull-right">
									登录 <i class="fa fa-arrow-circle-right"></i>
								</a>
							</div>
						</fieldset>
					</form>
				</div>
				<!-- end: LOGIN BOX -->
				<!-- start: FORGOT BOX -->
				<div class="box-forgot">
					<h3>忘记密码？</h3>
					<p>
						请下面输入您的用户名，重新设置您的密码。
					</p>
					<form class="form-forgot">
						<div class="errorHandler alert alert-danger no-display">
							<i class="fa fa-remove-sign"></i>  输入有误，请检查！
						</div>
						<fieldset>
							<div class="form-group">
								<span class="input-icon">
									<input type="text" class="form-control" id="user-name" name="username" placeholder="用户名">
									<i class="fa fa-user"></i> 
								</span>
							</div>
							<div class="form-group">
								<span class="input-icon">
									<input type="text" class="form-control" id="code" name="code" placeholder="输入验证码">
									<!-- <i class="fa fa-user"></i>  -->
								</span>
							</div>	
							<div class="form-group">
								<span class="input-icon">
									<input type="text" class="form-control" id="new-pwd" name="newpwd" placeholder="输入新的密码">
									<i class="fa fa-lock"></i> 
								</span>
							</div>														
							<div class="form-actions">
								<a class="btn btn-light-grey go-back">
									<i class="fa fa-chevron-circle-left"></i> 返回登录
								</a>
								<a type="submit" id="forget-btn" class="btn btn-green pull-right">
									<span class="get-code">获取验证码</span>
									<i class="fa fa-arrow-circle-right"></i>
								</a>
							</div>
						</fieldset>
					</form>
					<!-- start: COPYRIGHT -->
					<div class="copyright">
						2015 &copy; JfinalUIB.
					</div>
					<!-- end: COPYRIGHT -->
				</div>
				<!-- end: FORGOT BOX -->
				<!-- start: REGISTER BOX -->
				<div class="box-register">
					<h3>注册</h3>
					<p>
						请输入您的个人信息：
					</p>
					<form class="form-register">
						<div class="errorHandler alert alert-danger no-display">
							<i class="fa fa-remove-sign"></i> 输入有误， 请检查！
						</div>
						<fieldset>
							<div class="form-group">
								<input type="text" class="form-control" name="full_name" placeholder="全名">
							</div>
							<div class="form-group">
								<input type="text" class="form-control" name="address" placeholder="地址">
							</div>
							<div class="form-group">
								<input type="text" class="form-control" name="city" placeholder="城市">
							</div>
							<div class="form-group">
								<div>
									<label class="radio-inline">
										<input type="radio" class="grey" value="F" name="gender">
										女
									</label>
									<label class="radio-inline">
										<input type="radio" class="grey" value="M" name="gender">
										男
									</label>
								</div>
							</div>
							<p>
								Enter your account details below:
							</p>
							<div class="form-group">
								<span class="input-icon">
									<input type="email" class="form-control" name="email" placeholder="邮箱">
									<i class="fa fa-envelope"></i> </span>
							</div>
							<div class="form-group">
								<span class="input-icon">
									<input type="password" class="form-control" id="password" name="password" placeholder="密码">
									<i class="fa fa-lock"></i> </span>
							</div>
							<div class="form-group">
								<span class="input-icon">
									<input type="password" class="form-control" name="password_again" placeholder="再次确认密码">
									<i class="fa fa-lock"></i> </span>
							</div>
							<div class="form-group">
								<div>
									<label for="agree" class="checkbox-inline">
										<input type="checkbox" class="grey agree" id="agree" name="agree">
										我同意服务条款和隐私政策
									</label>
								</div>
							</div>
							<div class="form-actions">
								已拥有一个账户？
								<a href="#" class="go-back">
									返回登录
								</a>
								<a type="submit" class="btn btn-green pull-right">
									提交 <i class="fa fa-arrow-circle-right"></i>
								</a>
							</div>
						</fieldset>
					</form>
					<!-- start: COPYRIGHT -->
					<div class="copyright">
						2015 &copy; JfinalUIB.
					</div>
					<!-- end: COPYRIGHT -->
				</div>
				<!-- end: REGISTER BOX -->
			</div>
		</div>
		<!-- start: MAIN JAVASCRIPTS -->
		<!--[if lt IE 9]>
		<script src="assets/plugins/respond.min.js"></script>
		<script src="assets/plugins/excanvas.min.js"></script>
		<script type="text/javascript" src="assets/plugins/jQuery/jquery-1.11.1.min.js"></script>
		<![endif]-->
		<!--[if gte IE 9]><!-->
		<script src="assets/plugins/jQuery/jquery-2.1.1.min.js"></script>
		<!--<![endif]-->
		<script src="assets/plugins/jquery-ui/jquery-ui-1.10.2.custom.min.js"></script>
		<script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
		<script src="assets/plugins/iCheck/jquery.icheck.min.js"></script>
		<script src="assets/plugins/jquery.transit/jquery.transit.js"></script>
		<script src="assets/plugins/TouchSwipe/jquery.touchSwipe.min.js"></script>
		<script src="assets/js/main.js"></script>
		<!-- end: MAIN JAVASCRIPTS -->
		<!-- start: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY -->
		<script src="assets/plugins/jquery-validation/dist/jquery.validate.min.js"></script>
		 <script src="assets/js/getCookies.js"></script> 
		<script src="assets/js/login.js"></script>
		
		<!-- end: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY -->
		<script>
			jQuery(document).ready(function() {
				Main.init();
				Login.init();


				/***********************************事件***************************************/
				// 登陆
				$("#submit-btn").click(function(event) {
					if (event.keyCode == 13) { 
			            loginFn();
			        }  
					loginFn();
				});

				// 键盘回车事件
				var tds = $("html"); 
				tds.keydown(function(event){
					var myEvent = event || window.event; //解决不同浏览器获取事件对象的差异
					switch(myEvent.keyCode) {
						case 13:  //回车事件
						$("#submit-btn").click(); 
						break;
					}
				});				

				// 忘记密码
				$("#forget-btn").click(function() {
					if($(".get-code").text() == "获取验证码"){
						getCode();
					}else if($(".get-code").text() == "提交"){
						editPwd();
					}
				});				

				/***********************************函数***************************************/
				// 登陆
				function loginFn(){
					$.ajax({
						url: localStorage.grobalUrl + "/login/login",
						type:"post",
						async:false,
						data:{
							user: $("#username").val(),
							pass: $("#pwd").val()
						},
						success: function(data){
							console.log(data);
							if(data.errCode == "00001"){
								$(".errorHandler").show();
							}else if(data.errCode == "00000"){
								var token = data.Token;
								MXCookie.set("token",token);
								window.location.href = "index.html?username="+data.errMsg;
							}
						},
						error: function(error){
							console.log(error);
						}
					});				
				}	

				// 获取验证码
				function getCode(){
					$.ajax({
						url: localStorage.grobalUrl + "/user/smsSend",
						type: "post",
						data: {
							username: $("#user-name").val(),
							
						},
						success: function(data){
							console.log(data);
							if(data.errCode == "00000"){
								$(".get-code").text("提交");
							}else if(data.errCode == "00001"){
								$(".form-forgot .errorHandler").show();
							}
						},
						error: function(error){
							console.log(error);
						}
					});					
				}

				// 更改密码
				function editPwd() {
					$.ajax({
						url:  localStorage.grobalUrl + "/user/forgetPass",
						type: "post",
						data: {
							username: $("#user-name").val(),
							code: $("#code").val(),
							newPass: $("#new-pwd").val()						
						},
						success: function(data){
							console.log(data);
							if(data.errCode == "00000"){
								var boxToShow;
								if ($('.box-register').is(":visible")) {
									boxToShow = $('.box-register');
								} else {
									boxToShow = $('.box-forgot');
								}
								boxToShow.addClass("animated bounceOutLeft").on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
									boxToShow.hide().removeClass("animated bounceOutLeft");

								});
								$('.box-login').show().addClass("animated bounceInRight").on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
									$(this).show().removeClass("animated bounceInRight");

								});
							}else if(data.errCode == "00001"){
								$(".form-forgot .errorHandler").show().text("验证码有误");
							}
						},
						error: function(error){
							console.log(error);
						}
					});								
				}
							


			});

			
			
		</script>
	</body>
	<!-- end: BODY -->
</html>